<template>


  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.close"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form size="small" ref="formOpsComputerServerRef" :rules="checkRule" :model="submitData" label-width="180px">

      <el-form-item label="当前计算机" prop="parentId">
        <el-input v-model.trim="selectComputer.name" disabled />
      </el-form-item>

      <el-form-item label="可迁移目标" prop="targetId">
        <el-select v-model="submitData.targetId" placeholder="请选择" clearable >
          <el-option
            v-for="item in targetOpt"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>



    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="migrate"
                 v-if="defaultValue.saveUpdSelect !== 'select'">{{ defaultValue.title }}</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>


</template>

<script>

import http from '@/utils/http'
import {clearInvalid, checkNull, getUploadImagePath} from "@/utils/utils"

export default {
  name: "OpsComputerServerSaveUpd",
  data() {
    return {
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        close: true,
        // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
        lockScroll: false,
        appendToBody: true,
      },
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '迁移',
        // 保存还是修改or查看,取值有 select | save | upd
        saveUpdSelect: 'save'
      },
      // 校验规则
      checkRule: {
        targetId: [{required: true, message: '请选择可迁移目标', trigger: 'change'}],
      },
      // 提交的数据
      submitData:{
        targetId: null,
      },
      // 可迁移目标
      targetOpt:[],
      // 选中的计算机
      selectComputer:{},
    }
  },
  methods: {
    /**
     * 获取可迁移的目标计算机
     */
    getTransfer(){
      http.post("/computer/getTransfer", {
        computerServerId: this.selectComputer.id,
      }).then(response => {
        let res = response.data;
        this.targetOpt = res.data

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 初始化操作
     * @param selectComputer 被选中的计算机
     */
    init(selectComputer){
      this.targetOpt = null
      this.selectComputer = selectComputer
      this.getTransfer()

      this.tableConfig.show = true
    },
    /**
     * 迁移数据用户到另外一个计算机下面
     */
    migrate(){
      http.post("/computer/migrate", {
        computerServerId: this.selectComputer.id,
        targetId: this.submitData.targetId
      }).then(response => {
        let res = response.data;
        this.$message.success("保存成功");
        this.$emit('getComputerServerTree', null)
        // 关闭弹出框,继续添加
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
  },
  // 进入马上执行
  mounted() {

  },
}
</script>

<style scoped>

</style>

